<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/专题列表.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <script src="js/template-native.js"></script>
    <script src="js/专题.js"></script>
    <script src="js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="container">
    <!--title部分-->
    <div class="top">
        <a href="#" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1>专题列表</h1>
    </div>
    <!--内容部分-->
    <div class="nav">
        <ul>

        </ul>
    </div>

</div>
</body>
</html>
<script type="text/template" id="t1">
<%for(var i=0;i<array.length;i++){%>
        <li>
            <a href="<%=array[i].url%>">
                <img src="<%=array[i].img%>" alt="">
            </a>
            <span><%=array[i].title%></span>
        </li>
    <%}%>
</script>
<script>
    $.ajax({
        type:"get",
        url:"http://127.0.0.1:9090/api/gettopics",
        data:"json",
        success:function(data){
            console.log(data);
            var html = template("t1", {array: data});
            $(".nav ul").html(html);
        }
    })
</script>